<template>
  <div>
    <el-breadcrumb separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }" :key="-1">{{$t(`message.menus.index`)}}</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in breadCrumbs" :key="index">
          {{$t(`message.menus.${item.meta.lang}`)}}
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts">
  import {defineComponent, computed} from 'vue'
  import {useStore} from "vuex";
  import {MenuItem} from "@/types/menu";

  export default defineComponent({
    name: "BreadCrumbs",
    setup(){
      const store = useStore()
      return {
        breadCrumbs: computed(()=>{
          return store.state.app.breadCrumbs.filter((item: MenuItem) => item.name !== '_Home')
        })
      }
    }
  })
</script>

<style lang="scss" scoped>

</style>
